<template>
  <div class="regulations">
    <van-sticky>
      <Header :leftArrow="false" :search="false" title="政策"/>
    </van-sticky>
    <div class="main">
      <van-pull-refresh v-if="error" v-model="isLoading" @refresh="onRefresh">
        <van-cell
          v-for="(item,index) in list"
          :key="index"
          :title="`${item.name}`"
          is-link
          @click="jump('/regulations-section', item.childrenCode, item.name)"/>
      </van-pull-refresh>
      <p v-else class="error-text" @click="fetchData(code)">请求失败，点击重新加载</p>
    </div>
  </div>
</template>

<script>
import Header from '../../components/Header/NoLeftArrowHeader'

import { getPolicyCatalog } from './../../api/policy'

export default {
  name: 'Regulations',
  components: {
    Header
  },
  data() {
    return {
      list: [],
      isLoading: false,
      catalogCode: '',
      error: false,
      code: ''
    }
  },
  mounted() {
    const { catalogCode } = this
    this.fetchData(catalogCode)
  },
  methods: {
    jump(path, catalogCode, title) {
      this.$router.push({ path, query: { catalogCode, title }})
    },

    onRefresh() {
      const { catalogCode } = this
      this.fetchData(catalogCode)
    },

    async fetchData(catalogCode) {
      const result = await getPolicyCatalog({ catalogCode })
      if (result) {
        this.isLoading = false
        this.error = true
        this.list = result.catalog
      } else {
        this.error = false
      }
    }
  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">
.regulations {
  height: 100%;

  .main {
    position: fixed;
    top: 46px;
    bottom: 50px;
    width: 100%;
    height: 100%;
    overflow: auto;

    .van-pull-refresh{
      height: 100%;
      overflow: auto;
    }

    .error-text {
      color: #969799;
      font-size: 14px;
      line-height: 50px;
      text-align: center;
    }
  }
}
</style>
